import styles from "./index.module.scss";
import dayjs from "dayjs";
import Icon from "@/components/icon";
import { ArtComment } from "@/types/data";
import { http } from "@/utils/http";
import { useState } from "react";
interface Props {
  comment: ArtComment;
}

export default function ReplyItem({ comment }: Props) {
  const [likeCount, setLikeCount] = useState(comment.like_count);
  const onLike = async (id: string) => {
    try {
      await http.post("/comment/likings", {
        target: id,
      });
      setLikeCount(likeCount + 1);
    } catch (error) {
      console.error("点赞失败", error);
    }
  };
  return (
      <div className={styles.ReplyItem}>
        <div className={styles.commentator}>
          <div className={styles.author}>
            <div className={styles.avatar}>
              <img
                src={comment.aut_photo}
                alt=""
              />
              <span>{comment.aut_name}</span>
            </div>
            <div className={styles.like}>
              <span>{likeCount}</span>
              <Icon
                type={"iconbtn_like"}
                onClick={() => onLike(comment.com_id)}
              />
            </div>
          </div>
        </div>
        <div className={styles.content}>{comment.content}</div>
      </div>
  );
}
